<template>
  <view>
    <t-cropper
      style="position: fixed; top: 0; left: 0; z-index: 9999"
      mode="ratio"
      :imageUrl="imageUrl"
      :width="10"
      :height="10"
      :radius="0"
      :delay="150"
      :quality="0.1"
      :maxWidth="500"
      :maxHeight="500"
      @cancel="onCancel"
      @confirm="onConfirm"
    ></t-cropper>

    <view class="Upload">
      <view
        class="upload-image"
        v-for="(item, index) in resultUrl"
        :key="index"
      >
        <view class="delete" @click.stop="deleteImg(index)">
          <up-icon name="close" color="#9DA5AF" size="28rpx"></up-icon>
        </view>
        <image
          class="images"
          @click="prviewImgae(index, item.url)"
          :src="item.url"
        />
      </view>
      <view
        class="camera-k"
        @click="selectFile"
        v-if="maxCount > resultUrl.length"
      >
        {{ value }}
        <up-icon name="camera-fill" color="#9DA5AF" size="48rpx"></up-icon>
      </view>
    </view>
  </view>

  <view class="show-camera" v-if="ishowcamera">
    <view class="show-camera-k">
      <view class="show-sm"> 设备权限使用说明 </view>
      <view class="show-des">
        为了给您带来更好的服务，需要获取您的相机权限与读取图片及文件权限，用于更换上传图片、扫一扫等功能，对于您授权的信息我们竭尽全力提供安全保护。
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, toRefs, ref, watch } from "vue";
import { base_URL } from "@/utils/http";
import { onShow } from "@dcloudio/uni-app";

const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  fileList: {
    type: Array,
    default: [],
  },
});

onShow(() => {
  console.log("sadas");
  // tabbarvalue.value = props.value\
  console.log("sadas", props);
});

const emit = defineEmits(["confirmFun", "delete"]);

const maxCount = ref(1);

const model = reactive({
  imageUrl: "",
  resultUrl: [],
});

const { resultUrl, imageUrl } = toRefs(model);
watch(
  props,
  (newVal, oldVal) => {
    console.log("Array changed:", newVal.fileList);
    model.resultUrl = newVal.fileList;
  },
  { deep: true }
);

console.log("model.resultUrl", model.resultUrl);
// 使用uni.compressImage压缩图片
const compressImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: "original",
    success: (res) => {
      //  示例：防止大图片文件的Image无法直接临时路径显示图片
      uni.showLoading({
        title: "处理中...",
        mask: true,
      });
      // 使用uni.compressImage压缩图片
      uni.compressImage({
        src: res.tempFilePaths[0],
        quality: 80, // 压缩质量
        success: (compressRes) => {
          model.imageUrl = compressRes.tempFilePath;
        },
        fail: (err) => {
          console.error("图片压缩失败：", err);
          uni.hideLoading(); // 关闭loading
        },
        complete: () => {
          //   uni.hideLoading(); // 关闭loading
        },
      });
    },
  });
};

// 使用默认压缩方式
const defaultCompressImage = () => {
  console.log("defaultCompressImage");
  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    success: (res) => {
      model.imageUrl = res.tempFilePaths[0];
    },
  });
};

/**
 *** 特别声明：在使用 uni.chooseImage 选择的大图片文件无法直接在 Image 组件中显示，通常涉及到以下可能的问题和限制。
 *** 图片大小和尺寸限制：移动设备和浏览器对于能够加载和处理的图片大小有限制，如果选择的图片文件尺寸过大，可能无法正常加载和显示。
 *** 性能问题：大图片文件可能会导致页面加载缓慢或者卡顿，尤其是在移动设备上。
 *** 内存问题：加载大图片可能会消耗大量的内存资源，特别是在移动设备上，可能导致内存不足或者页面崩溃的问题。
 *** 解决参考方案如下：
 *** 防止选择大文件图片后无法在Image中直接临时路径显示图片，导致无法在裁剪插件中显示，
 *** 根据项目需要对大尺寸图片进行压缩、对图片质量要求高的，需要提前上传至oss进行采用网络图片进行裁剪。
 */
const selectFile = () => {
  // 推荐使用其他压缩方式，这里只是简单大图片压缩示例-经供思路参考切勿使用
  // 示例一：uni.compressImage压缩图片
  // compressImage();

  // 示例二：使用自带压缩图

  // #ifdef APP-PLUS

  const systemInfo = uni.getSystemInfoSync();

  if (systemInfo.osName === "android") {
    if (uni.getStorageSync("isspermission")) {
    } else {
      ishowcamera.value = true;
    }

    plus.android.requestPermissions(["android.permission.CAMERA"], (e) => {
      if (e.deniedAlways.length > 0) {
        // 弹出提示框解释为何需要权限，引导用户打开设置页面开启

        ishowcamera.value = false;
      } else if (e.deniedPresent.length > 0) {
        //权限被临时拒绝
        // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

        ishowcamera.value = false;
      } else if (e.deniedAlways.length > 0) {
        //权限被永久拒绝
        // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

        ishowcamera.value = false;
      } else {
        plus.android.requestPermissions(
          ["android.permission.READ_EXTERNAL_STORAGE"],
          (e) => {
            if (e.deniedAlways.length > 0) {
              // 弹出提示框解释为何需要权限，引导用户打开设置页面开启

              ishowcamera.value = false;
            } else if (e.deniedPresent.length > 0) {
              //权限被临时拒绝
              // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

              ishowcamera.value = false;
            } else if (e.deniedAlways.length > 0) {
              //权限被永久拒绝
              // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

              ishowcamera.value = false;
            } else {
              ishowcamera.value = false;
              uni.setStorageSync("isspermission", true);
              defaultCompressImage();
            }
          }
        );
      }
    });
    return;
  }

  // #endif

  defaultCompressImage();
};
const selectFileOne = () => {
  if (maxCount.value == 1) {
    defaultCompressImage();
  }
};

// 关闭裁剪
const onCancel = () => {
  model.imageUrl = "";
};

// 裁剪确认
const onConfirm = async (res) => {
  // 设置url的值，显示控件
  //   const params = {
  //     id: new Date().getTime(),
  //     url: res.tempFilePath,
  //   };
  //   model.resultUrl.push(params);
  //   model.imageUrl = "";

  let result = null;
  // #ifdef H5
  result = await uploadFilePromise(res.tempFilePath);
  // #endif

  // #ifndef H5
  result = await uploadFilePromise(res.tempFilePath);
  // #endif

  const params = {
    id: new Date().getTime(),

    url: result.data.url,
  };
  if (maxCount.value > 1) {
    model.resultUrl.push(params);
    model.imageUrl = "";
  } else {
    if (model.imageUrl.length > 0) {
      model.resultUrl[0] = params;
      model.imageUrl = "";
    } else {
      model.resultUrl.push(params);
      model.imageUrl = "";
    }
  }
  emit("confirmFun", result.data.url);
};

const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: base_URL + "/app/product/image", // 仅为示例，非真实的接口地址
      filePath: url,
      header: {
        "X-Auth-Token": uni.getStorageSync("X-Auth-Token"),
      },
      name: "file",
      formData: {
        user: "test",
      },
      success: (res) => {
        let data = JSON.parse(res.data);
        if (data.code == 200) {
          setTimeout(() => {
            uni.hideLoading(); // 关闭loading
            resolve(data);
          }, 10);
        } else {
          uni.hideLoading(); // 关闭loading
          reject(data);
        }
      },
      fail: (err) => {
        console.log(err);
        uni.hideLoading(); // 关闭loading
      },
    });
  });
};

// 预览图片
const prviewImgae = (index, url) => {
  uni.previewImage({
    current: index, // 当前资源下标
    urls: [url],
  });
};

const deleteImg = (index) => {
  model.resultUrl.splice(index, 1);
  emit("delete", index);
};

const ishowcamera = ref(false);
function PermissionFun() {
  // #ifdef APP-PLUS

  const systemInfo = uni.getSystemInfoSync();

  if (systemInfo.osName === "android") {
    if (uni.getStorageSync("isspermission")) {
    } else {
      ishowcamera.value = true;
    }

    plus.android.requestPermissions(["android.permission.CAMERA"], (e) => {
      if (e.deniedAlways.length > 0) {
        // 弹出提示框解释为何需要权限，引导用户打开设置页面开启

        ishowcamera.value = false;
        return false;
      } else if (e.deniedPresent.length > 0) {
        //权限被临时拒绝
        // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

        ishowcamera.value = false;
        return false;
      } else if (e.deniedAlways.length > 0) {
        //权限被永久拒绝
        // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

        ishowcamera.value = false;
        return false;
      } else {
        console.log("22222222222");
        plus.android.requestPermissions(
          ["android.permission.READ_EXTERNAL_STORAGE"],
          (e) => {
            if (e.deniedAlways.length > 0) {
              // 弹出提示框解释为何需要权限，引导用户打开设置页面开启

              ishowcamera.value = false;
              return false;
            } else if (e.deniedPresent.length > 0) {
              //权限被临时拒绝
              // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

              ishowcamera.value = false;
              return false;
            } else if (e.deniedAlways.length > 0) {
              //权限被永久拒绝
              // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限

              ishowcamera.value = false;
              return false;
            } else {
              ishowcamera.value = false;
              uni.setStorageSync("isspermission", true);
              console.log("33333");
              return true;
            }
          }
        );
      }
    });
    return true;
  } else {
    return true;
  }

  // #endif
}
</script>

<style lang="scss" scoped>
.preview {
  padding: 32rpx;

  .images {
    margin: 10rpx;
    width: 200rpx;
    height: 200rpx;
  }
}
.button {
  margin: 0 20rpx;
}

.Upload {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;

  .camera-k {
    display: flex;
    justify-content: center;
    width: 160rpx;
    height: 160rpx;
    //   border: 1rpx dashed rgb(211, 212, 214);

    background-color: #f7f8fa;
    margin-right: 0rpx;
  }
  .upload-image {
    // margin: 10rpx;
    width: 160rpx;
    height: 160rpx;
    position: relative;
    box-sizing: border-box;

    .delete {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      border-radius: 0rpx 0rpx 0rpx 20rpx;
      width: 46rpx;
      height: 46rpx;
      background: rgba(0, 0, 0, 0.8);

      right: 0;
      top: 0;
      z-index: 1;
    }
    .images {
      width: 160rpx;
      height: 160rpx;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  }
}

.show-camera {
  width: 100%;
  position: fixed;
  z-index: 9999999;
  top: 0rpx;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  margin: 0 auto;
  margin-top: 120rpx;

  .show-camera-k {
    width: 80%;
    margin: 0 auto;
    margin-top: 60rpx;
    padding: 30rpx;
    color: #000000;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;

    .show-sm {
      font-weight: bold;
      font-size: 26rpx;
    }

    .show-des {
      margin-top: 10rpx;
      font-size: 22rpx;
    }
  }
}
</style>
